<template>
  <div>
    <h1 style="margin-bottom: 10px; text-align: center;">每日热点新闻</h1>
    <!-- 新增iframe容器 -->
    <iframe
        ref="iframeRef"
        :src="iframeUrl"
        style="width:100%; height: calc(100vh - 40px); border:none"
        frameborder="0"
    ></iframe>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const iframeUrl = ref('https:news.bayuexunying.com') // 替换为需要嵌入的网页地址
const iframeRef = ref<HTMLIFrameElement>()

// 窗口大小变化时自适应
const handleResize = () => {
  if (iframeRef.value) {
    iframeRef.value.style.height = `${window.innerHeight - 40}px`
  }
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  handleResize() // 初始化设置高度
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 确保父容器高度占满 */
div {
  height: 100vh;
}
</style>
